* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

// 声明图标字体
@font-face {
    font-family: "electronicFont";
    src: url(../font/DS-DIGIT.TTF);
}
body {
    line-height: 1.15;
    background: url(../images/bg.jpg) no-repeat top center;
}
// 顶部样式
header {
    position: relative;
    height: 1.25rem;
    background: url(../images/head_bg.png) no-repeat;
    background-size: 100% 100%;

    h1 {
        line-height: 1rem;
        text-align: center;
        color: white;
        font-size: .475rem;
    }

    .right-time {
      position: absolute;
      top: 0;
      right: .375rem;
      line-height: .9375rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: .25rem;
    }
}

// 主体
.main-box {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: .125rem .125rem 0 .125rem;

  .left-box {
    flex: 3;
  }

  // 中间盒子模块
  .center-box {
    flex: 5;
    overflow: hidden;
    margin: 0 .125rem .1875rem .125rem;
    // 数字模块
    .number {
        padding: .1875rem;
        background-color: rgba(25, 186, 139, 0.07);
  
        .number-head {
            position: relative;
            border: .0125rem solid rgba(101, 132, 226, 0.1);
            height: 1rem;
            color: #fff;

            &::before, &::after {
                position: absolute;
                width: .375rem;
                height: .125rem;
                content: "";
            }
            &::before {
                top: 0;
                left: 0;
                border-top: .025rem solid #02a6b5;
                border-left: .025rem solid #02a6b5;
            }
        
            &::after {
                bottom: 0;
                right: 0;
                border-bottom: .025rem solid #02a6b5;
                border-right: .025rem solid #02a6b5;
            }
    
            //  标题文字样式
            ul {
                display: flex;
                justify-content: start;
                align-items: center;

                li {
                    position: relative;
                    flex: 1;
                    line-height: 1rem;
                    font-family: "electronicFont";
                    font-size: .875rem;
                    text-align: center;
                    color: #ffeb7b;

                    &::after {
                       position: absolute;
                       content: "";
                       top: 25%;
                       right: 0;
                       height: 50%;
                       width: .0125rem;
                       background: rgba(255, 255, 255, 0.1);
                    }
                }
            }
        }

        // 标题底部
        .number-footer {
            ul {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                li {
                    flex: 1;
                    height: .5rem;
                    line-height: .5rem;
                    padding-top: .125rem;
                    text-align: center;
                    font-size: .225rem;
                    color: rgba(255, 255, 2555, 0.7);
                }
            }
        }
    }

    // 地图模块
    .map {
        position: relative;
        height: 10.125rem;

        // 球体背景
        .sphere, .sphere-background, .sphere-line {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .sphere {
            width: 6.475rem;
            height: 6.475rem;
            background: url(../images//map.png) no-repeat;
            background-size: 100% 100%;
        }

        // 球体背景旋转
        .sphere-background {
            width: 8.0375rem;
            height: 8.0375rem;
            background: url(../images/lbx.png) no-repeat;
            background-size: 100% 100%;
            // 匀速无限循环
            animation: rotate-box 15s linear infinite;
            opacity: .6;
        }

        // 球体外层线逆时针旋转
        .sphere-line {
            width: 7.075rem;
            height: 7.075rem;
            background: url(../images/jt.png) no-repeat;
            background-size: 100% 100%;
            // 匀速无限循环
            animation: counterclockwise-line 10s linear infinite;
            opacity: .6;
        }

        // 定义旋转动画
        @keyframes rotate-box {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        // 逆时针旋转
        @keyframes counterclockwise-line {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(-360deg);
            }
        }

        // 地图
        .map-chart {
            position: absolute;
            width: 100%;
            height: 10.125rem;
            top: 0;
            left: 0;
        }
    }
  }

  .right-box {
    flex: 3;

  }

  // 左右两侧盒子样式
  .left-line {
    a {
        position: absolute;
        color: #fff;
    }
    a:nth-child(1) {
        right: 15%;
    }
    a:nth-child(2) {
        right: 1%;
    }
  }
  .panel {
    position: relative;
    height: 3.875rem;
    margin-bottom: .1875rem;
    padding: 0 .1875rem .25rem .1875rem;
    background: url(../images/line.png);
    border: .0125rem solid rgba(25, 186, 139, 0.17);

    &::before, &::after {
        position: absolute;
        width: .125rem;
        height: .125rem;
        content: "";
    }
    &::before {
        top: 0;
        left: 0;
        border-top: .025rem solid #02a6b5;
        border-left: .025rem solid #02a6b5;
    }

    &::after {
        top: 0;
        right: 0;
        border-top: .025rem solid #02a6b5;
        border-right: .025rem solid #02a6b5;
    }

    // 标题
    h2 {
        height: .6rem;
        line-height: .6rem;
        text-align: center;
        font-size: .25rem;
        font-weight: 400;
        color: #fff;
    }

    // 内容
    .chart {
        height: 3rem;
    }
  }

  // 底部样式
  .panel-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;

    &::before, &::after {
        position: absolute;
        width: .125rem;
        height: .125rem;
        content: "";
    }
    &::before {
        bottom: 0;
        left: 0;
        border-bottom: .025rem solid #02a6b5;
        border-left: .025rem solid #02a6b5;
    }

    &::after {
        bottom: 0;
        right: 0;
        border-bottom: .025rem solid #02a6b5;
        border-right: .025rem solid #02a6b5;
    }
  }
}

// 约束屏幕大小
@media screen and (max-with: 1024px) {
    html {
        font-size: 42px !important;
    }
}

@media screen and (min-with: 1920px) {
    html {
        font-size: 88px !important;
    }
}